<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>优惠券编辑/添加</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box mt">
            <el-form ref="form" label-position="left" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="标题" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="intro">
                  <el-input type="textarea" v-model="form.intro"></el-input>
                </el-form-item>
                <el-form-item label="使用时间" required>
                    <el-col :span="11">
                      <el-form-item prop="start_time">
                        <el-date-picker type="date" placeholder="开始日期" v-model="form.start_time" style="width: 100%;"></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                      <el-form-item prop="end_time">
                        <el-date-picker type="date" placeholder="结束日期" v-model="form.end_time" style="width: 100%;"></el-date-picker>
                      </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="优惠金额" prop="pay">
                  <el-input v-model.number="form.pay"></el-input>
                </el-form-item>
                <el-form-item label="服务套餐" prop="service_id">
                  <el-select v-model="form.service_id" placeholder="请选择服务套餐">
                    <el-option v-for="(item,index) in service_list" :key="index" :label="item.service_name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">提交</el-button>
                    <el-button @click="navTop" v-if="!Edit">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import bus from '../../../bus.js';
export default {
  name: 'v-form',
  data: function() {
    return {
      Edit: false,
      form: {
        id: undefined,
        title: undefined,
        content: undefined,
        sort: 0
      },
      rules: {
          name: [
              { required: true, message: '请输入标题' }
          ],
          intro: [
              { required: true, message: '请输入内容' }
          ],
          start_time: [
              { required: true, message: '请填写排序' }
          ],
          end_time: [
            { required: true, message: '此项必填' }
          ],
          pay: [
            { required: true, message: '此项必填' },
            { type: 'number', message: '必须是数字' }
          ],
          service_id: [
            { required: true, message: '请填写服务套餐ID' }
          ]
      },
      service_list: null
    }
  },
  methods: {
    onSubmit(formName) {
      //  进行规则验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
            // 验证通过，进行编辑/添加判断
            if (!this.Edit) {
                // 不是编辑，去除id
                delete this.form.id
                APP.ajax('post@coupon/add', this.form, res => {
                    if (res.data.status === 200) {
                        this.$message.success('添加成功！');
                    }
                })
            } else {
                APP.ajax('post@coupon/update', this.form, res => {
                    if (res.data.status === 200) {
                        this.$message.success('编辑成功！')
                    }
                })
            }
        } else {
          return false;
        }
      });
    },
    navTop() {
      bus.$emit('ViewShow', '取消');
    }
  },
  mounted () {
    APP.ajax('coupon/service', {}, res => {
      this.service_list = res.data.data
    })
    // 判断是否有id传值，没有则不是编辑页面，而是添加页面
    if (this.$route.params.id) {
        this.Edit = true;
        APP.ajax('post@coupon/detail', { id: this.$route.params.id }, res => {
            this.form = res.data.data[0];
        })
    }
  }
}
</script>
<style scoped>
.avatar{
    float: left;
    width: 100%;
    height: 100%;
}
</style>

